<!-- home组件 -->
<template>
  <!-- home容器 -->
  <el-container class="home">
    <!-- 头部 -->
    <el-header class="home_header">
      <div class="home_header_left">
        <img src="../assets/images/img/logo.png" alt="" height="44" />
        <span class="title_text">SOM管理系统</span>
      </div>
      <el-button plain type="info" @click="logout()" style="margin-right: 10px"
        >退出</el-button
      >
    </el-header>
    <!-- 主体 -->
    <el-container class="home_body">
      <!-- 左侧导航 -->
      <el-aside
        class="home_body_nav active_width"
        :width="isCollapse ? '64px' : '200px'"
      >
        <!-- 导航菜单 -->
        <!-- 展开按钮 -->

        <el-menu
          :default-active="activePath"
          class="el-menu-vertical"
          background-color="#5f5f5f"
          text-color="#fff"
          active-text-color="#84D4FA"
          :collapse="isCollapse"
          router
        >
          <el-radio-group
            v-model="isCollapse"
            fill="#41b0e7"
            size="mini"
            class="checkout_btn_box"
          >
            <div>
              <el-radio-button :label="true" class="checkout_btn"
                >收起</el-radio-button
              >
            </div>
            <div>
              <el-radio-button :label="false" class="checkout_btn"
                >展开</el-radio-button
              >
            </div>
          </el-radio-group>
          <!-- 一级菜单 -->
          <el-submenu
            :index="item.id + ''"
            v-for="item in navData"
            :key="item.id"
          >
            <!-- 一级菜单内容 -->
            <template slot="title">
              <svg class="icon" aria-hidden="true">
                <use :xlink:href="iconObj[item.id]"></use>
              </svg>
              <span>{{ item.authName }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item
              @click="saveNavState('/' + i.path)"
              :index="'/' + i.path"
              v-for="i in item.children"
              :key="i.id"
            >
              <!-- 二级菜单内容 -->
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{ i.authName }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 右侧内容 -->
      <el-main class="home_body_content">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { getNavData } from "../service/home";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      isCollapse: false, //导航栏是否展开
      navData: [], //导航数据
      activePath: "", //激活的路径
      iconObj: {
        //导航图标
        125: "#icon-users",
        103: "#icon-tijikongjian",
        101: "#icon-shangpin",
        102: "#icon-danju",
        145: "#icon-baobiao",
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 获取导航列表数据
    getNavDataFile() {
      getNavData().then((res) => {
        if (res.meta.status != 200)
          return this.$message.error("获取数据失败！");
        this.navData = res.data;
      });
    },
    //  保存路径
    saveNavState(activePath) {
      window.sessionStorage.setItem("activePatn", activePath);
      this.activePath = activePath;
    },

    //退出登录
    logout() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getNavDataFile();
    this.activePath = window.sessionStorage.getItem("activePatn");
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.active_width {
  transition: 300ms width;
}
.home {
  height: 100%;
  .home_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(132, 212, 250);
    padding: 0;
    .home_header_left {
      display: flex;
      align-items: center;
    }
    .title_text {
      height: 40px;
      line-height: 40px;
      padding-left: 20px;
      font-size: 28px;
      color: #545c64;
      text-align: center;
    }
  }
  .home_body {
    height: 100%;

    .home_body_nav {
      overflow: hidden;
      .checkout_btn_box {
        width: 64px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #5f5f5f;
        flex-wrap: wrap;
        padding: 3px 0;
        .checkout_btn {
          margin: 3px 0;
        }
      }
      .el-menu-vertical:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
      }
      .el-menu-vertical {
        height: 100%;
        border: none;
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 24px;
          height: 24px;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -7px;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
          padding-right: 8px;
        }
      }
    }
  }
}
</style>
